<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="css/media.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_s89r5cd4vv89qkt9.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <title>前端菜鸟</title>
</head>
<body>
<header>
    <a href="javascript:;"><img class="header__logo" src="img/logo1.png" alt="logo"></a>
    <nav class="header__nav header__nav-1">
        <a class="header__nav-1_item" href="javascript:;">首页</a>
        <a class="header__nav-1_item" href="javascript:;">发现</a>
    </nav>
    <form class="header__form">
        <input type="search" placeholder="搜索" class="header__form_search"/>
        <button class="header__form_submit"><i style="color:#ffffff;" class="iconfont icon-search"></i></button>
    </form>
    <nav class="header__nav header__nav-2">
        <a class="header__nav-2_item" href="javascript:;">登录</a>
        <a class="header__nav-2_item" href="javascript:;">注册</a>
        <a class="header__nav-2_item" href="javascript:;">写文章</a>
    </nav>
</header>
<div id="container">
    <article>
        <section>
            <div class="article__section_wrap">
                <a href="javascript:;"><img class="article__section_headPortrait" src="" alt="头像"></a>
                <a href="javascript:;"><span class="article__section_userName">用户昵称</span></a>
                <span class="article__section_postedTime">发表时间</span>
                <h3 class="article__section_h3"><a href="javascript:;">文章标题</a></h3>
                <p class="article__section_content">文章内容</p>
                <nav class="article__section_nav">
                    <a class="article__section_nav-item article__section_nav-item-1" href="javascript:;">
                        来自哪个专题
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-2" href="javascript:;">
                        <i class="iconfont icon-view"></i> 阅读人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-3" href="javascript:;">
                        <i class="iconfont icon-iconfontconment"></i> 评论人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-4" href="javascript:;">
                        <i class="iconfont icon-heart2"></i> 收藏人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-5" href="javascript:;">
                        <i class="iconfont icon-money"></i> 打赏人数
                    </a>
                </nav>
            </div>
            <div class="article__section_wrap-img">
                <a><img src="" alt="文章带图片"></a>
            </div>
        </section>

        <section>
            <div class="article__section_wrap">
                <a href="javascript:;"><img class="article__section_headPortrait" src="" alt="头像"></a>
                <a href="javascript:;"><span class="article__section_userName">用户昵称</span></a>
                <span class="article__section_postedTime">发表时间</span>
                <h3 class="article__section_h3"><a href="javascript:;">文章标题</a></h3>
                <p class="article__section_content">文章内容</p>
                <nav class="article__section_nav">
                    <a class="article__section_nav-item article__section_nav-item-1" href="javascript:;">
                        来自哪个专题
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-2" href="javascript:;">
                        <i class="iconfont icon-view"></i> 阅读人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-3" href="javascript:;">
                        <i class="iconfont icon-iconfontconment"></i> 评论人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-4" href="javascript:;">
                        <i class="iconfont icon-heart2"></i> 收藏人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-5" href="javascript:;">
                        <i class="iconfont icon-money"></i> 打赏人数
                    </a>
                </nav>
            </div>
            <div class="article__section_wrap-img">
                <a><img src="" alt="文章带图片"></a>
            </div>
        </section>

        <section>
            <div class="article__section_wrap">
                <a href="javascript:;"><img class="article__section_headPortrait" src="" alt="头像"></a>
                <a href="javascript:;"><span class="article__section_userName">用户昵称</span></a>
                <span class="article__section_postedTime">发表时间</span>
                <h3 class="article__section_h3"><a href="javascript:;">文章标题</a></h3>
                <p class="article__section_content">文章内容</p>
                <nav class="article__section_nav">
                    <a class="article__section_nav-item article__section_nav-item-1" href="javascript:;">
                        来自哪个专题
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-2" href="javascript:;">
                        <i class="iconfont icon-view"></i> 阅读人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-3" href="javascript:;">
                        <i class="iconfont icon-iconfontconment"></i> 评论人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-4" href="javascript:;">
                        <i class="iconfont icon-heart2"></i> 收藏人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-5" href="javascript:;">
                        <i class="iconfont icon-money"></i> 打赏人数
                    </a>
                </nav>
            </div>
            <div class="article__section_wrap-img">
                <a><img src="" alt="文章带图片"></a>
            </div>
        </section>

        <section>
            <div class="article__section_wrap">
                <a href="javascript:;"><img class="article__section_headPortrait" src="" alt="头像"></a>
                <a href="javascript:;"><span class="article__section_userName">用户昵称</span></a>
                <span class="article__section_postedTime">发表时间</span>
                <h3 class="article__section_h3"><a href="javascript:;">文章标题</a></h3>
                <p class="article__section_content">文章内容</p>
                <nav class="article__section_nav">
                    <a class="article__section_nav-item article__section_nav-item-1" href="javascript:;">
                        来自哪个专题
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-2" href="javascript:;">
                        <i class="iconfont icon-view"></i> 阅读人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-3" href="javascript:;">
                        <i class="iconfont icon-iconfontconment"></i> 评论人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-4" href="javascript:;">
                        <i class="iconfont icon-heart2"></i> 收藏人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-5" href="javascript:;">
                        <i class="iconfont icon-money"></i> 打赏人数
                    </a>
                </nav>
            </div>
            <div class="article__section_wrap-img">
                <a><img src="" alt="文章带图片"></a>
            </div>
        </section>

        <section>
            <div class="article__section_wrap">
                <a href="javascript:;"><img class="article__section_headPortrait" src="" alt="头像"></a>
                <a href="javascript:;"><span class="article__section_userName">用户昵称</span></a>
                <span class="article__section_postedTime">发表时间</span>
                <h3 class="article__section_h3"><a href="javascript:;">文章标题</a></h3>
                <p class="article__section_content">文章内容</p>
                <nav class="article__section_nav">
                    <a class="article__section_nav-item article__section_nav-item-1" href="javascript:;">
                        来自哪个专题
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-2" href="javascript:;">
                        <i class="iconfont icon-view"></i> 阅读人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-3" href="javascript:;">
                        <i class="iconfont icon-iconfontconment"></i> 评论人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-4" href="javascript:;">
                        <i class="iconfont icon-heart2"></i> 收藏人数
                    </a>
                    <a class="article__section_nav-item article__section_nav-item-5" href="javascript:;">
                        <i class="iconfont icon-money"></i> 打赏人数
                    </a>
                </nav>
            </div>
            <div class="article__section_wrap-img">
                <a><img src="" alt="文章带图片"></a>
            </div>
        </section>
    </article>

    <aside>
        <ul class="aside__list">
            <li><a href="javascript:;">新上榜 <i class="iconfont icon-right1"></i></a></li>
            <li><a href="javascript:;">日报<i class="iconfont icon-right1"></i></a></li>
            <li><a href="javascript:;">7日热门<i class="iconfont icon-right1"></i></a></li>
            <li><a href="javascript:;">30日热门<i class="iconfont icon-right1"></i></a></li>
            <li><a href="javascript:;">菜鸟出版<i class="iconfont icon-right1"></i></a></li>
        </ul>

        <div class="aside__AppDownload">
            <a href="javascript:;"><img src="img/App_download.png" alt="AppDownload"></a>
            <div class="aside__AppDownload_button">
            <a class="aside__AppDownload_button-qrcode" href="javascript:;"><i class="iconfont icon-qrcode"></i> 扫码 </a>
            <a class="aside__AppDownload_button-android" href="javascript:;"><i class="iconfont icon-android1"></i> 安卓</a>
            <a class="aside__AppDownload_button-ios" href="javascript:;"><i class="iconfont icon-ios"></i> ios</a>
            </div>
        </div>

        <div>
            <div>
                <span>推荐作者</span>
                <span>1/38</span>
                <i class="iconfont icon-left"></i>
                <i class="iconfont icon-right1"></i>
            </div>
            <div>
                <a href="javascript:;"><img class="" src="" alt="头像"></a>
                <a href="javascript:;">用户昵称</a>
                <span class="article__section_postedTime">写了多少字	&middot; 多少人喜欢</span>
                <a href="javascript:;">+关注</a>
            </div>
        </div>
    </aside>

</div>
<footer>

</footer>
</body>
</html>